<template>
    <div>
        <el-card>
            <h3 class="title">详细信息
            <!-- <el-button size="small" style="float: right;" type="success" icon="el-icon-download" @click="exportList">导出</el-button> -->
            <el-button size="small" style="float: right;" type="info" icon="el-icon-back" @click="goBack">返回</el-button>
            </h3>
            <el-form label-width="140px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="订单编号：">
                            {{ detailData.id || '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="订单时间：">
                            {{ detailData.orderTime || '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单金额：">
                            {{ detailData.orderAmount || '-'}} 元
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="投标人名称：">
                            {{ detailData.bidderName || '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="招标人名称：">
                            {{ detailData.tendereeName || '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="招标代理名称：">
                            {{ detailData.bidAgencyName|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="合作方名称：">
                            {{ detailData.partnerName|| '-'}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="标段编号：">
                            {{ detailData.bidSectionNo|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="标段名称：">
                            {{ detailData.bidSectionName|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="标段估算额：">
                            {{ detailData.bidSectionAmount|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开标时间：">
                            {{ detailData.bidOpenTime|| '-'}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row class="order_list_title">
                <el-col :span="12">
                    <h3>结算详情</h3>
                </el-col>
                <el-table :data="tableData" :header-cell-style="{padding:'5px 0px'}" border>
                    <el-table-column prop="itemName" label="清单名称"  align="center"></el-table-column>
                    <el-table-column prop="itemStatus" label="清单状态"  align="center">
                        <template slot-scope="scope" >
                            <el-tag  size="small" :type ="filterStatus(listStatus,scope.row.itemStatus).type">
                                {{filterStatus(listStatus,scope.row.itemStatus).value}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="appName" label="申请方名称" align="center"></el-table-column>
                    <el-table-column prop="receName" label="接收方名称" align="center"></el-table-column>
                    <el-table-column prop="settAmount" label="结算金额(元)" align="center"></el-table-column>
                    <el-table-column prop="settRate" label="结算费率" align="center"></el-table-column>
                    <el-table-column prop="settTime" label="结算时间" align="center"></el-table-column>
                </el-table>

            </el-row>
        </el-card>

    </div>
</template>

<script>
import COMMON_METHODS from '@mixins/common-methods.js'

export default {
    mixins: [COMMON_METHODS],
    components: { },
    props: {},
    data(){
        return{
            detailData:{},
            tableData:[],
            listStatus:[
                {value:'待确认',key:'1',type:'info'},
                {value:'待开票',key:'2',type:'warning'},
                {value:'待结算',key:'3',type:'primary'},
                {value:'已结算',key:'4',type:'success'},
            ]
        }
    },
    computed: {
        rowguid:function(){
            return this.getQuery('rowguid');
        }  
    },
    watch:{

    },
    methods: {
        getDetail:function(){
            this.$get(this.$store.getters.orderUrl + '/hcgOrder/'+this.rowguid,{
            }, function(data) {
                this.detailData = data.hcgOrder;
                this.tableData = data.hcgSettOrderInfo;
            })
        },
        //导出
        exportList:function(){
            if(this.tableData.length !=0){
                var search = toSearch({
                    isExport: true,
                    token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
                });
                window.open('/bhtong/settmg/hcgSettItem/' + this.rowguid + search);
            }else{
                ShowMsg('当前清单暂无数据，暂不支持导出', 'warning');
            }
        },
        //返回
        goBack:function(){
            this.$router.go(-1);
        },
    },
    mounted:function(){
        this.getDetail();   
    }
}
</script>

<style scoped lang="scss">
    .title{
        padding-bottom: 10px;
        border-bottom: 1px solid #e8e8e8
    }
    .order_list_title{
        line-height: 40px;
        span{
            padding-right: 10px;

        }
    }
    ::v-deep .el-table th > .cell {
        text-align: center;
    }

</style>

